import React, { Component } from 'react';
import {Card, Form, Input, Button, Icon, message, Checkbox} from 'antd';
import './form.less';
const FormItem = Form.Item;
class login extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        let userInfo = this.props.form.getFieldsValue();
        this.props.form.validateFields((err,vlaues) => {
            if (!err) {
                message.success(`${userInfo.userName}正在学习React,密码是${userInfo.userPwd}`)
            }
        })
    }
    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <Card title="登录行内表单">
                    <Form layout="inline" style={{width: 600}}>
                        <FormItem>
                            {
                                getFieldDecorator('username', {
                                    initialValue: 'Jack',
                                    rules: [{required: true, message: '请输入用户名'}]
                                })(
                                    <Input  prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder="请输入用户名"/>
                                )
                            }
                            
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('pwd', {
                                    initialValue: '123456',
                                    rules: [{required: true, message: '请输入密码'}]
                                })(
                                    <Input  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码"/>
                                )
                            }
                            
                        </FormItem>
                        <FormItem>
                            <Button type="primary">登录</Button>
                        </FormItem>
                    </Form>
                </Card>
                <Card title="登录水平表单">
                    <Form onSubmit={this.handleSubmit} layout="horizontal" style={{width: 300}}>
                        <FormItem>
                            {
                                getFieldDecorator('userName', {
                                    initialValue: '',
                                    rules: [
                                        {required: true, message: '请输入用户名'},
                                        {min: 4, max: 10, message: '长度不在范围内'},
                                        {pattern: new RegExp('^\w+$','g'), message: '必须是数字或者字母'}
                                    ]
                                })(
                                    <Input  prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder="请输入用户名"/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('userPwd', {
                                    initialValue: '',
                                    rules: [{required: true, message: '请输入密码'}]
                                })(
                                    <Input  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码"/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: false
                                })(
                                   <Checkbox>记住密码</Checkbox>
                                )
                            }
                            <a href="" style={{float: 'right'}}>忘记密码</a>
                        </FormItem>
                        <FormItem>
                            <Button type="primary"  htmlType="submit" >登录</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        );
    }
}
const LoginForm = Form.create()(login);
export default LoginForm;